html - ul/li Drop Down not aligning to the left? -
i'm trying create drop down settings page tab, works fine no issues when opened on desktop when opened on mobile/tablet or shrinking browser size tabs menu "crushed" in sense. looks it's dropping down right when maybe if dropping down left might fix it. no idea anyway, wondered if knows how fix issue?
current desktop example 
current mobile example 
the way want look 
html
<body> <div id="header"> <div id="headertitle"> <p>project archive</p> </div> <div id="nav"> <ul> <li class="navon"><a class="active" href="home.php">home</a></li> <li><a href="home.php">all</a></li> <li><a href="home.php">categories</a></li> <li><a href="home.php">quote</a></li> <li><a href="home.php">support</a></li> <li class="dropdown"> <a href="#" class="dropbtn">settings</a> <div class="dropdown-content"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div> </li> </ul> </div> </div> <div id="search"> <p>search documents...</p> <form action="home.php" method="post"> <input type="text" name="search" placeholder="search" class="tbsearch"> </form> </div> <div id="documents"> <div id="docgrid"> <div id="docleft"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> <div id="docright"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> </div> </div> <div id="docgrid"> <div id="docleft"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> <div id="docright"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> </div> </div> <div id="docgrid"> <div id="docleft"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> <div id="docright"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> </div> </div> <div id="docgrid"> <div id="docleft"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> <div id="docright"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> </div> </div> </body> css
@charset "utf-8"; body{ background:#e8e8e8; overflow-x:hidden; } #header{ width:100%; height:80px; font-weight:bold; } #search{ height:115px; background-color:#4c66a4; color:#fff; text-align:center; font-size:18px; font-weight:bold; padding-top:10px; } #navtop{ height:5px; margin-bottom:20px; background-color:#4c66a4; } #documents{ width:100%; height:100%; } #docgrid{ height:225px; margin-left:10%; margin-right:10%; margin-top:20px; margin-bottom:20px; } #docleft{ float:left; height:222px; width:45%; background-color:#fff; border-bottom:3px solid #bebebe; } #docright{ float:right; height:222px; width:45%; background-color:#fff; border-bottom:3px solid #bebebe; } #docname{ text-align:center; margin-top:10px; margin-bottom:10px; font-size:16px; font-weight:bold; } #docdescription{ text-align:center; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; height:110px; } #docopen{ text-align:center; margin-left:17.5%; margin-right:17.5%; margin-top:10px; margin-bottom:10px; } #headertitle{ float:left; font-weight:bold; font-size:20px; text-align:center; width:25%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; font-size:12px; height:80px; } .navon{ border-top:3px solid #4c66a4; height:47px; padding-top:27px; } li { float: left; width:12%; height:50px; padding-top:30px; text-align:center; } a:visited { text-decoration: none; color:#000; } li a, .dropbtn { display: inline-block; color: #000; text-align: center; text-decoration: none; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .btnopen{ text-align:center; vertical-align:middle; height:30px; width:100%; border-radius:5px; background-color:#4c66a4; color:#fff; font-size:15px; font-weight:bold; } .headertitle{ font-size:20px; text-align:center; vertical-align:middle; font-weight:bold; } .tbsearch{ border: 1px solid #848484; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; outline:0; padding-left:10px; padding-right:10px; margin-top:0; margin-bottom:0; margin-left:12.5%; margin-right:12.5%; width:75%; height:25px; font-size:15px; } } /* tablet layout: 481px 768px. inherits styles from: mobile layout. */ @media screen , (min-width: 481px) { } /* desktop layout: 769px max of 1232px. inherits styles from: mobile layout , tablet layout. */ @media screen , (min-width: 769px) { } edit
example comment supplied sagar kodte:
hope helps you. edited
@charset "utf-8"; body{ background:#e8e8e8; overflow-x:hidden; } #header{ width:100%; height:80px; font-weight:bold; } #search{ height:115px; background-color:#4c66a4; color:#fff; text-align:center; font-size:18px; font-weight:bold; padding-top:10px; } #navtop{ height:5px; margin-bottom:20px; background-color:#4c66a4; } #documents{ width:100%; height:100%; } #docgrid{ height:225px; margin-left:10%; margin-right:10%; margin-top:20px; margin-bottom:20px; } #docleft{ float:left; height:222px; width:45%; background-color:#fff; border-bottom:3px solid #bebebe; } #docright{ float:right; height:222px; width:45%; background-color:#fff; border-bottom:3px solid #bebebe; } #docname{ text-align:center; margin-top:10px; margin-bottom:10px; font-size:16px; font-weight:bold; } #docdescription{ text-align:center; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; height:110px; } #docopen{ text-align:center; margin-left:17.5%; margin-right:17.5%; margin-top:10px; margin-bottom:10px; } #headertitle{ float:left; font-weight:bold; font-size:20px; text-align:center; width:25%; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; font-size:11px; height:80px; } .navon{ border-top:3px solid #4c66a4; height:47px; padding-top:27px; } li { float: left; width:16%; height:50px; padding-top:30px; text-align:center; } a:visited { text-decoration: none; color:#000; } li a, .dropbtn { display: inline-block; color: #000; text-align: center; text-decoration: none; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #f1f1f1 } .dropdown:hover .dropdown-content { display: block; } .btnopen{ text-align:center; vertical-align:middle; height:30px; width:100%; border-radius:5px; background-color:#4c66a4; color:#fff; font-size:15px; font-weight:bold; } .headertitle{ font-size:20px; text-align:center; vertical-align:middle; font-weight:bold; } .tbsearch{ border: 1px solid #848484; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; outline:0; padding-left:10px; padding-right:10px; margin-top:0; margin-bottom:0; margin-left:12.5%; margin-right:12.5%; width:75%; height:25px; font-size:15px; } @media screen , (max-width: 480px) { li { font-size:8px;} } @media screen , (max-width: 320px) { li { font-size:5px; !important} }<div id="header"> <div id="headertitle"> <p>project archive</p> </div> <div id="nav"> <ul> <li class="navon"><a class="active" href="home.php">home</a></li> <li><a href="home.php">all</a></li> <li><a href="home.php">categories</a></li> <li><a href="home.php">quote</a></li> <li><a href="home.php">support</a></li> <li class="dropdown"> <a href="#" class="dropbtn">settings</a> <div class="dropdown-content"> <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div> </li> </ul> </div> </div> <div id="search"> <p>search documents...</p> <form action="home.php" method="post"> <input type="text" name="search" placeholder="search" class="tbsearch"> </form> </div> <div id="documents"> <div id="docgrid"> <div id="docleft"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> <div id="docright"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> </div> </div> <div id="docgrid"> <div id="docleft"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> <div id="docright"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> </div> </div> <div id="docgrid"> <div id="docleft"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> <div id="docright"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> </div> </div> <div id="docgrid"> <div id="docleft"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> <div id="docright"> <div id="docname"> <p>doc name</p> </div> <div id="docdescription"> <p>this area description of document displayed.</p> </div> <div id="docopen"> <table class="btnopen"> <tr> <td>open</td> </tr> </table> </div> </div> </div> </div>
Comments
Post a Comment