CODEWITHSUNDEEP
htmlcss
Coding Duchess
Coding Duchess

Reputation: 6909

Highlighting menu items with CSS

I have the following menu:

<ul id="nav-mobile" class="right">
                <li><img src="images/ic_icon1.png"/>
        <a class="white-text" href='#'><span>Links</span></a>
                            <ul id="quicklinkdrop" class="dropdown-content">
                                <li><a href="#">Home</a></li>
                                   <li><a href="#">Access</a></li>
                                   <li><a href="#">Zone</a></li>
                            </ul>
             </li>
                <li><img src="images/ic_icon2.png"/>
        <a class="white-text" href='#'><span>User</span></a>
            <ul id="userdrop" class="dropdown-content">
                    <li><a href="profile.html">My Profile</a></li>
                    <li><a href="logout.html">Log Off</a></li>
                  </ul>
        </li>
        </ul>

and I use CSS to style it:

#nav-mobile{
    margin-top: 0px; 
}
    #nav-mobile li { 
        display: inline-block;
        margin: 0 2.5em 1.5em 1.5em;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    }

    #nav-mobile li a{ 
        text-decoration: none;
    position: relative;
     }

#nav-mobile li img{ 
    position: relative;
    top: .4em;
     }


     #nav-mobile li .dropdown-content { 
        display: none;
    position: absolute;
    color: #188CCC;
    background-color: white;
    z-index: 1;
    box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
    max-width: 180px;
      }

      #nav-mobile li:hover .dropdown-content{ 
           display: block;
      }

#nav-mobile li .dropdown-content li:hover { 
    background-color: #CCCCCC;
}


     #nav-mobile li .dropdown-content li a { 
         display: none;}
    #nav-mobile li:hover .dropdown-content li a { 
        display: block;
    }

For the most part everything works as desired. Only when the user hovers over Home, Access, and Zone menu items, only the word itself gets highlighted, not the entire row. how can that be accomplished with CSS?

Upvotes: 0

Views: 43

Answers (3)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

You can use the following solution (with many changes on the CSS code):

#nav-mobile{
  margin-top: 0px; 
}
#nav-mobile li { 
  display: inline-block;
  margin: 0 2.5em 1.5em 1.5em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li a{ 
  text-decoration: none;
  position: relative;
}
#nav-mobile li img{ 
  position: relative;
  top: 0.4em;
}
#nav-mobile li .dropdown-content { 
  display: none;
  position: absolute;
  color: #188CCC;
  background-color: white;
  z-index: 1;
  box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
  max-width: 180px;
}
#nav-mobile li:hover .dropdown-content{ 
 display: block;
 padding:0;
 margin:0;
}
#nav-mobile li .dropdown-content li {
  margin:0;
  width:100%;
}
#nav-mobile li .dropdown-content li a {
  display: block;
  margin:0;
  padding: 0.75em 2.5em 0.75em 1.5em;
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
#nav-mobile li .dropdown-content li:hover { 
  background-color: #CCCCCC;
}
<ul id="nav-mobile" class="right">
  <li>
    <img src="images/ic_icon1.png"/>
    <a class="white-text" href='#'><span>Links</span></a>
    <ul id="quicklinkdrop" class="dropdown-content">
      <li><a href="#">Home</a></li>
      <li><a href="#">Access</a></li>
      <li><a href="#">Zone</a></li>
    </ul>
  </li>
  <li>
    <img src="images/ic_icon2.png"/>
    <a class="white-text" href='#'><span>User</span></a>
    <ul id="userdrop" class="dropdown-content">
      <li><a href="profile.html">My Profile</a></li>
      <li><a href="logout.html">Log Off</a></li>
    </ul>
  </li>
</ul>

An improved example (reduced CSS code):

ul#nav-mobile, ul#nav-mobile ul {
  color:#188ccc;
  list-style-type:none;
  margin:0;
  padding:0;
}
ul#nav-mobile li {
  display:inline-block;
  margin:0;
}
ul#nav-mobile li a, ul#nav-mobile li a:link {
  display:inline-block;
  font-family:Roboto, Helvetica, Arial, sans-serif;
  margin:0;
  padding:0.75em 2.5em 0.75em 0.5em;
  position:relative;
  text-decoration:none;
}
ul#nav-mobile li ul.dropdown-content {
  box-shadow:0px 8px 25px 0px rgba(28, 24, 28, 0.65);
  display:none;
  max-width:180px;
  position:absolute;
  z-index:1;
}  
ul#nav-mobile li:hover ul.dropdown-content { 
  display:block;
}  
ul#nav-mobile li:hover ul.dropdown-content li,
ul#nav-mobile li:hover ul.dropdown-content li a {
  width:100%;
}
ul#nav-mobile li:hover ul.dropdown-content li:hover {
  background:#ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul id="nav-mobile" class="right">
  <li>
    <i class="fa fa-stack-overflow" aria-hidden="true"></i>
    <a class="white-text" href='#'><span>Links</span></a>
    <ul id="quicklinkdrop" class="dropdown-content">
      <li><a href="#">Home</a></li>
      <li><a href="#">Access</a></li>
      <li><a href="#">Zone</a></li>
    </ul>
  </li>
  <li>
    <i class="fa fa-stack-overflow" aria-hidden="true"></i>
    <a class="white-text" href='#'><span>User</span></a>
    <ul id="userdrop" class="dropdown-content">
      <li><a href="profile.html">My Profile</a></li>
      <li><a href="logout.html">Log Off</a></li>
    </ul>
  </li>
</ul>

Upvotes: 2

sunil kumar
sunil kumar

Reputation: 301

#nav-mobile{
   margin-top: 0px; 
}
#nav-mobile > li { 
    display: inline-block;
    margin: 0 2.5em 1.5em 1.5em;
    font-family: Roboto, Helvetica, Arial, sans-serif;
}

#nav-mobile li a{ 
    text-decoration: none;
    position: relative;
}

#nav-mobile li img{ 
    position: relative;
    top: .4em;
}
#nav-mobile li .dropdown-content { 
    display: none;
    position: absolute;
    color: #188CCC;
    background-color: white;
    z-index: 1;
    box-shadow: 0px 8px 25px 0px rgba(28, 24, 28, 0.65);
    max-width: 180px;
    width: 100%;
    padding-left: 0px;
    list-style: none;
}

#nav-mobile li:hover .dropdown-content{ 
   display: block;
}
#nav-mobile li:hover .dropdown-content li a{
    display: block;
    padding: 0.75em 2.5em 0.75em 1.5em;
}
#nav-mobile li .dropdown-content li:hover a{ 
    background-color: #CCCCCC;
}
    <ul id="nav-mobile" class="right">
    <li><img src="images/ic_icon1.png"/>
      <a class="white-text" href='#'><span>Links</span></a>
      <ul id="quicklinkdrop" class="dropdown-content">
        <li><a href="#">Home</a></li>
        <li><a href="#">Access</a></li>
        <li><a href="#">Zone</a></li>
      </ul>
    </li>
    <li><img src="images/ic_icon2.png"/>
      <a class="white-text" href='#'><span>User</span></a>
      <ul id="userdrop" class="dropdown-content">
        <li><a href="profile.html">My Profile</a></li>
        <li><a href="logout.html">Log Off</a></li>
      </ul>
    </li>
  </ul>

Hope this will help you

Upvotes: 0

kawnah
kawnah

Reputation: 3414

Give list items 100% width and no margin left, adjust padding of <a> tag accordingly:

#nav-mobile li .dropdown-content li {
  width: 100%;
  margin-left: 0;
}

#nav-mobile li:hover .dropdown-content li a {
  padding-left: 10px;
}

http://jsfiddle.net/w6he4pgt/

Upvotes: 0

Related Questions