why is it that if I will hover on my menu the background color is not occupying the li it will only show background color to the hyperlink. and also my divider is overlapping the height of my menu
#navmenu ul{
list-style-type: none;
margin: 0px;
padding: 8px 0px;
background-color:#008083;
height: auto;
}
#navmenu ul li {
display: inline;
padding: 23px;
border-right:solid 1px #00e7bb;
}
#navmenu ul li:last-child{
border-right: none;
}
#navmenu ul li a{
text-decoration: none;
padding: 8px 8px 8px 8px;
color:#fff;
}
#navmenu ul li a:hover{
background-color:#00e7bb;
}
<div id ="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Gallary</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Inform</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
You have the padding on the list so the anchor cannot fill the full width of the list item. If you put the padding just on the anchor then it will fill the list parent (assuming the following is true also). Inline elements with vertical padding do not affect the line-height hence why your dividers overlap.
You need the list and anchor as block elements which could be achieved by floating or by inline-block.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#navmenu ul {
list-style-type: none;
margin: 0px;
padding: 8px;
background-color:#008083;
height: auto;
overflow:hidden;
}
#navmenu ul li {
float:left;
border-right:solid 1px #00e7bb;
}
#navmenu ul li:last-child {
border-right: none;
}
#navmenu ul li a {
text-decoration: none;
padding: 8px 23px;
color:#fff;
float:left;
}
#navmenu ul li a:hover {
background-color:#00e7bb;
}
</style>
</head>
<body>
<div id="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Gallary</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Inform</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
Since you are using an ID (#navmenu) for your selectors you really don’t need many of the tag names you used. #navmenu ul li a could justa s easily be #navmenu a.
you have made LIs into inline elements, this affect how VERTICAL padding is rendered. Also your anchor elements are ( by default inline elements), again vertical padding shows on inline elements, but doesn’t really affect the flow
The :last-child pseudo-class is really neat, isn’t it? however it may be simpler and add older browser support to use the adjacent selector “+”.
I hope this helped and let you in a few extra tricks in the process too!
That’s not what it looks like. Is that what you want? The full height dividors? You can move the 8px padding from #navmanu ul{} and put it to #navmenu ul li{}.
I don’t know whether you want hover to have it full height or what, so I’m just going to leave you with that for now.
Am I right in thinking that what you are calling a “divider” are the lines between the menu items, if thats is the case and you want them to be full height of the colored area, then do as Ryan suggested and eliminate the vertical padding from the UL and add it to the LI ( or the A) if desired.
Nope the divider height is okay,…it’s the divider how it looks like,as you can see in the links the divider is looks like separating,I want to achieve like that.
This link? What separation is occuring? I’m confused. Perhaps you meant a different word? I’m not sure what kind of result you are expecting. @dresden_phoenix , do you? Since you seem to be online at the moment.
You could do that with two borders of the appropriate color to create that effect.
e.g. you add a right dark border and a light left border to the element and then just hide the single border on first and last. Or better perhaps to use :after and place a border there absolutely.
Here’s an example based on the code I gave earlier using :after to place the second slightly transparent border.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#navmenu ul {
list-style-type: none;
margin: 0px;
padding:0;
background-color:#008083;
height: auto;
overflow:hidden;
border-radius:4px;
}
#navmenu ul li {
float:left;
}
#navmenu ul li a {
text-decoration: none;
padding: 16px 23px;
color:#fff;
float:left;
border-right:1px solid #000;
position:relative;
}
#navmenu ul li a:after{
content:" ";
position:absolute;
right:-2px;
top:0;
bottom:0;
width:1px;
background:#fff;
opacity:.7;
}
#navmenu ul li a:hover {
background-color:#00e7bb;
}
</style>
</head>
<body>
<div id="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Gallary</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Inform</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
Note that the anchor element needs position:relative to create the positioning context for the absolutely placed pseudo element (:after)
The content property works had in hand with the :after pseudo element in that it generates the content that you append to the element. The way you append content is by putting content inside the content property.
e.g. content:"I am some text"
If you have no text content then you still need to create the ‘box’ that you want to style and in those cases you still use the content property but with no content. It can contain a space or no-space (it doesn’t matter when absolutely placing the element). You can then style it as though it were an empty element appended to the end of the target element.
e.g. <span></span>
It will appear as inline content by default but of course you can then style it as you like with css and change its display/size/appearance etc.
