html - CSS Inheritance and float:left issues -


i new css , have few questions based on code below:

1) why bottom-border , background color cut off when said width= 100%?

2) why second unordered list (with class "dropdown") within first not inherit elements declared parent unordered list (with class "tabs")?

3) why first unordered list (with class "tabs") not appear horizontally when run in browser? i've tried using 'float: left' , 'display: inline' lines neither work, or separately

html:

<!doctype html> <html>     <head>         <title> random web page </title>         <link rel="stylesheet" type="text/css" href="basic styles test.cpp">     </head>     <body>         <div class="navbar">             <ul class="tabs">                 <li>pancakes</li>                 <li>waffles</li>                 <li>bacon</li>                 <li>drinks                     <ul class="dropdown">                         <li>orange juice</li>                         <li>milk</li>                         <li>water</li>                     </ul>                 </li>             </ul>         </div>     </body> </html> 

css:

.navbar {     position: absolute;     top: 0;      left = 0;      width = 100%;      background: red;     border-bottom: 5px solid #ccc;     overflow: hidden; } .tabs {      list-style: none;     float: left; }  .dropdown {  } 

  1. your syntax wrong, width:100%, not width = 100% :) same thing left = 0 it's attr:value in css.

  2. the second ul not styled because u used list-style:none on class .tabs if u want style ul's way u should use

    ul {list-style:none}
    or
    .tabs, .dropdown {list-style:none}

  3. if u want first ul horizontally u should use float:left on child-elements .tabs>li {float:left}
    .tabs>li means u select direct li-elements .tabs-class element


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -