How can i make <li> span full width across <ul>? - html

Question

I am creating a vertical navigation menu using ul and li I want to make span the full width of ul so I can have underline for each menu item (like this site (http://www.steffenallen.com/index.php))
However, there is a space in li that prevents it from spanning across the parent ul. Could someone tell me how the above website did it? Or, what I need to do?
<nav>
<ul class='menu'>
<li class="menuItem">
About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal </li>
<li class="submenu-Item">Seattle</li>
<li class="submenu-Item">South Korea</li>
</ul>
</li>
<li class="menuItem"> Contact </li>
<!-- <li> </li> -->
</ul>
My CSS is
ul,li{
list-style: none;
display: block;
}
ul.menu{
width: 170px;
/*position: absolute;*/
/*width: 100%;*/
/*margin-left: -20px;*/
border: 1px solid orange;
}
ul.submenu{
/*position: absolute;*/
/*left: -999px;*/
/*visibility: hidden;*/
display: none;
}
li{
width:140px;
margin: 0;
padding: 0;
/*width:100%;*/
border-left: 1px blue solid;
border-right: 1px blue solid;
}
span{
display: block;
}
li a, li span {
/*width: 170px;*/
/*width: 100%;*/
border-bottom: #cbcbcb 1px solid;
}
li.menuItem, li.submenu-Item{
text-align: right;
margin: 1em 0em 1em 0em;
}
li.menuitem > a{
color: #808080;
}
li a:hover{
color: steelblue;
}
li.menuItem a.current{
background-color: orange;
}
ul.menu:first-child{
margin-top: 0
}

Answer 1

First things first, your CSS is not well-written and hence a little difficult to understand.
The main problem in your code happens to be the default CSS that is being applied. You can remove that as follows:
ul, li {
margin: 0;
padding: 0;
}
However, I'd suggest you simplify your CSS code as follows. This will still achieve what you are looking for all the while making your code more elegant and easily readable. Please see the code below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
See this working below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
<nav>
<ul class='menu'>
<li class="menuItem"> About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal
</li>
<li class="submenu-Item">Seattle
</li>
<li class="submenu-Item">South Korea
</li>
</ul>
</li>
<li class="menuItem"> Contact
</li>
<!-- <li> </li> -->
</ul>
Hope this helps!!!

Answer 2

On the left side there is the default margin/padding of ULs, so just remove that. It's 40px and depends on browser if margin or padding is used.
ul, li {margin-left: 0; padding-left: 0;}
The space on the right side is caused by your widths, list has 170px, items just 140px.
http://jsfiddle.net/8q9chvbh/