css - html <li> tag won't expand to wrap anchor padding -


i have following navbar on page, , <li> tags expand height height of anchors, reason ignore anchors padding (you can see if run snippet , mouseover menu items).

can explain i'm doing wrong , how fix this?

thanks

#navbar {    text-align: center;    background-color: #913d88;  }  @media (min-width: 992px) {    #navbar {      border-radius: 10px;    }  }  #navbar ul {    list-style: none;    text-align: center;  }  #navbar ul li {    font-size: 1.1em;    font-weight: 400;    display: inline-block;  }  @media (min-width: 767px) {    #navbar ul li {      font-size: 1.2em;    }  }  #navbar ul li {    padding: 0.5em 1em;    width: 100%;    height: 100%;  }  @media (min-width: 992px) {    #navbar ul li {      padding: 0.5em 2em;    }  }  #navbar ul li a:visited, #navbar ul li a:link {    color: #fff;    text-decoration: none;  }  #navbar ul li a:hover {    background-color: #c371ba;    color: #491f45;  }  #navbar ul li img {    height: 1em;  }  #navbar ul .dropdown {    position: relative;  }  #navbar ul .dropdown:hover > .drop-nav {    display: block;  }  #navbar ul .dropdown .drop-nav {    position: absolute;    top: 95%;    display: none;  }  #navbar ul .dropdown .drop-nav li {    width: 200px;    font-size: 0.8em;    padding: 0.5em;    display: block;    background-color: #913d88;    border-bottom: 1px solid #fff;  }  #navbar ul .dropdown .drop-nav li:hover {    color: #491f45;    background-color: #c371ba;  }  #navbar ul .dropdown .drop-nav {    font-size: 1em;    line-height: 1.3em;  }  #navbar ul .dropdown .drop-nav a:visited, #navbar ul .dropdown .drop-nav alink {    color: #fff;    text-decoration: none;  }
<div id="navbar" ng-controller="navbarcontroller">    <ul>      <li ng-click="goto('http://www.ijs.si/ijsw')"><a href="">ijs</a>      </li>      <li class="dropdown"><a href="">knjižnica&nbsp;<span class="ion-arrow-down-b"></a>        <ul class="drop-nav">          <li ng-click="goto('#/predstavitev')"><a href="">predstavitev</a>          </li>          <li><a href="">osebje</a>          </li>        </ul>      </li>      <li class="dropdown"><a href="#">zaloga&nbsp;<span class="ion-arrow-down-b"></a>        <ul class="drop-nav">          <li><a href="">tiskane revije</a>          </li>          <li><a href="">elektronske revije</a>          </li>          <li><a href="">baze podatkov</a>          </li>          <li ng-click="goto('http://www.cobiss.si/scripts/cobiss?command=connect&amp;base=50108')"><a href="">katalog (cobiss)</a>          </li>        </ul>      </li>      <li class="dropdown"><a href="">storitve&nbsp;<span class="ion-arrow-down-b"></a>        <ul class="drop-nav">          <li><a href="">medknjižnična izposoja</a>          </li>          <li><a href="">fotokopirnica</a>          </li>          <li><a href="">bibliografije</a>          </li>        </ul>      </li>      <li>        <a href="">          <img src="images/en.gif">        </a>      </li>    </ul>  </div>

add display:block #navbar ul li a


Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -