无法增加 NavBar 高度，无法通过添加样式来增加<ul>

Question

Please Help, unable to increase NavBar width by editing.

 body, html { height: 100%; width: 100%; overflow-x: hidden; margin: 0; padding: 0; font-family: century gothic; font-size: 1em; } div { float: left; } /*Header*/ @keyframes one { 0% { margin-right: 140% } 100% { margin-right: 43% } } @keyframes two { 0% { margin-top: 120% } 100% { margin-top: 2% } } .headtxt { float: left; font-size: 1.6em; font-weight: bolder; color: #839192; margin: 2% 0%; text-align: center; cursor: pointer; transition: 0.5s; } .headtxt:hover { font-size: 1.7em; color: #17202A; } /*Scrollbar*/ ::-webkit-scrollbar-track { width: 6px; background-color: #D6EAF8; } ::-webkit-scrollbar { width: 6px; background-color: #D6EAF8; } ::-webkit-scrollbar-thumb { width: 6px; background-color: #1A5276; } /*Navbar*/ a { text-decoration: none; } div.sticky { font-family: Century Gothic; position: sticky; top: 0; width: 100%; } ul { background-color: black; list-style: none; margin: 0; padding-left: 0; } li { color: rgba(0, 0, 0, 9); background: darkorange; display: block; width: 25%; float: left; text-decoration: none; transition-duration: 0.5s; } li a { color: #fff; padding: 1rem; } li:hover, li:focus-within { background: aqua; cursor: pointer; } li:focus-within a { outline: none; } ul li ul { background: green; visibility: hidden; opacity: 0; min-width: 25%; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover>ul, ul li:focus-within>ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; } /*Image Gallery*/ .bg { background: url("b1.jpg"); height: 100%; width: 100%; background-position: center; background-size: cover; animation-name: back; animation-duration: 10s; animation-iteration-count: infinite; background-attachment: fixed; } @keyframes back { 25% { background: url("b2.jpg"); background-position: center; background-size: cover; height: 100%; width: 100%; background-attachment: fixed; } 50% { background: url("b3.jpg"); background-position: center; background-size: cover; height: 100%; width: 100%; background-attachment: fixed; } 75% { background: url("b4.jpg"); background-position: center; background-size: cover; height: 100%; width: 100%; background-attachment: fixed; } } /*Circular Images*/ .hi1, .hi2, .hi3, .hi4 { background-size: cover; background-position: center; height: 480px; width: 480px; border-radius: 50%; float: left; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.8); font-size: 2em; line-height: 200%; } .hx1 { background-size: cover; background-position: center; height: 500px; width: 500px; float: left; } .hx2 { background-size: cover; background-position: center; height: 500px; width: 500px; float: left; } .hi1 { background-image: url("c1.jpg"); } .hi2 { background-image: url("c2.jpg"); } .hi3 { background-image: url("c3.jpg"); } .hi4 { background-image: url("c4.jpg"); } .hi1 div, .hi2 div, .hi3 div, .hi4 div { background-color: rgba(0, 0, 0, 0.65); transform: scale(0); height: 480px; width: 480px; color: white; transition: 0.75s; border-radius: 50%; float: left; } .hi1:hover div, .hi2:hover div, .hi3:hover div, .hi4:hover div { transform: scale(1); } .hi1 p { display: none; float: left; } .hi1:hover p { display: inline; } /* .hx1 div{ background-color: rgba(0,0,0,0.5); height: 500px; width: 0px; color :white; transition:0.8s; float: right; } .hx2 div{ background-color: rgba(0,0,0,0.5); height: 500px; width: 0px; color :white; transition:0.8s; float: right; } .hx1:hover div,.hx2:hover div { width:500px; height: 500px; } .hi1 p {display:none; float: left;} .hi1:hover p {display:inline;} */ /*Form*/ .x, .y { width: 100%; margin: 0; } .y input { padding: 20 0px 20px 0px; font-size: 1em; cursor: pointer; } .x input { padding: 20px; width: 20%; margin: 10px; transition: 0.5s; font-size: 0.9em; } .x input:focus { width: 38.25%; } .submit { width: 20%; border: none; background-color: #1F618D; color: white; cursor: pointer; transition: 0.1s; } .submit:hover { background-color: #2E86C1; } .submit:focus { background-color: #5DADE2; } /*Other Styles*/ .center { text-align: center; margin-bottom: 0%; } .white { background-color: white; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; color: #161616; } .black { background-color: black; color: white; } .bg0 { color: white; background-color: #1B2631; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg1 { color: white; background: #C6FFDD; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #f7797d, #FBD786, #C6FFDD); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #f7797d, #FBD786, #C6FFDD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg2 { color: #CCD1D1; background-color: #2E86C1; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg3 { color: #99A3A4; background-color: black; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-position: center; } .grad { background: #d9a7c7; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #fffcdc, #d9a7c7); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #fffcdc, #d9a7c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .txt { width: 100%; text-align: justify; } .txt p { padding: 6% 15%; font-size: 1.3em; line-height: 200%; } .txt h1 { padding: 6% 15% 0% 15%; font-size: 2.3em; line-height: 100%; text-align: center; color: black; font-weight: bold; } .txtx { text-align: justify; width: 100%; text-align: center; padding: 20px 0px; } .txtx h1 { font-size: 4em; } .txt1 { width: 50%; text-align: justify; height: 500px; } .txt1 p { padding: 10% 12% 0% 12%; font-size: 1.2em; line-height: 180%; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="CSS.css"> <link rel="icon" type="image/png" href="logo.png"> <title>Tourismpedia</title> </head> <body> <div style="width:100%; height: 91%; font-size: 1.4em; font-weight: lighter;font-family: Century Gothic;background-image: url('pgbg.png');"> <img src="logo.png" style="margin-right: 43%; float: right; margin-top: 8%; height: 35%; animation-name: one;animation-duration: 3s; animation-delay: 0s;"> <h1 class="txtx headtxt" style="animation-name: two;animation-duration: 4s; animation-delay: 0s; font-family: Century Gothic;"> <a href="" style="color: #2471A3; font-size: 1.6em; text-decoration: none;font-weight: bold;">Tourismpedia</a><br> Beautiful one day, perfect the next </h1> </div> <div class="sticky"> <nav class="navigation"> <ul> <li><a href="HTML.html">Home</a></li> <li><a href="#" aria-haspopup="true">Aspects</a> <ul class="dropdown" aria-label="submenu"> <li><a href="Aspect_1.html">Interaction with Nature</a></li> <li><a href="#">Community Involvement</a></li> <li><a href="#">Environmental Activities</a></li> <li><a href="#">Economic Sustainibility</a></li> </ul> </li> <li><a href="#">Sign Up</a></li> <li><a href="#">About Us</a></li> </ul> </nav> </div> <br> <div class="bg" style="z-index: 3;"></div> <div class="white txt" id="strip" style="float: left; margin-top: 0px;"> <p id="intro"> Ecotourism has become a 'buzz' word in tourism development both because it is believed to be a rapidly expanding segment of the tourism market, and because it is seen by many conservation groups as a means to ensure ecologically sustainable development, or more generally, a way to obtain sustainable development. In order to achieve the latter objectives, tourism must itself be sustainable from an economic, political, social and environmental point of view. This also means that it must be compatible with various economic, political, social and environmental objectives. </p> </div> <div class="bg1 txt" style="float: left;"> <p> Views differ about how rapidly the ecotourism segment of the tourism market is expanding and about how large it is. Nevertheless, it is generally believed that the ecotourism market is growing at a faster rate than tourism as a whole and that it accounts for around 20 per cent of the market for tourism. The WWF (Worldwide Fund for Nature) estimated that $12 billion of the $55 billion earned from foreign tourism in developing countries in 1988 was due to ecotourism, and therefore ecotourism accounted for more than 20 per cent of this market . </p> </div> <div class="white txt" style="float: left;"> <p> Ecotourism is Responsible travel to natural areas that conserves the environment and improves the well-being of local people. Ecotourism is about uniting conservation, communities, and sustainable travel. </p> </div> <!--Norway--> <div class="bg0 txtx" style="float: left;" id="meth"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1);"> Land of the Midnight Sun </h1> </div> <div class="white txt1" style="float: left;"> <p> Like a prolonged sunset and sunrise all at once, this natural phenomena colours heaven and earth in a reddish yellow light. Welcome to “the land of the midnight sun”. It's tempting to wonder about all the sights and experiences that have been made under the midnight sun through the ages – by people living off the sea in the Lofoten and Vesterålen archipelagos, or the Sami reindeer herders of the far north. </p> </div> <div class="white txt1" style="float: right;"> <img src="b1.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: right;"> <p> Norway is “powered by nature” according to the country's official tourism slogan. For many years, Norway has been ranked among the top countries to live in. Also, according to the UN World Happiness Report 2017, Norway was voted one of the happiest countries in the world. This makes it an obvious choice to be a top sustainable destination, when environmental, social and government profiles are included. </p> </div> <div class="white txt1" style="float: left;"> <img src="b2.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: left;"> <p> Norwegian people believe that conservation is a responsibility to be shared by the whole community, including by the tourism industry. In 2007, the Norwegian government introduced Sustainable Norway 2015, to increase awareness of sustainable tourism, the environment, local communities and social matters. </p> </div> <div class="white txt1" style="float: left;"> <img src="b3.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: right;"> <p> Sitting at 69° N right in the centre of the aurora zone, the city of Tromsø is most popular place for Europeans to take a weekend break in winter just hoping for a glimpse of the Northern Lights. Although you can see them from the town, it's better to get away from the light pollution. The Lyngsalpene mountain range is where some Northern Lights chases take place. </p> </div> <div class="white txt1" style="float: left;"> <img src="b4.jpg" style="width: 100%; height: 100%;"> </div> <!--Aspects--> <div class="bg0 txtx" style="float: left;" id="comp"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1)"> Aspects Of Ecotourism </h1> </div> <div class="grad"> <div style="background-position: center; background-size: cover; background-attachment: fixed; float: left; width: 100%"> <div class="hi1" style="float:left; margin: 7% 0% 7% 7%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Interaction with nature</p> </div> </div> <div class="hi2" style="float:right; margin: 7% 7% 7% 0%"> <div style="text-align: center;"> <p style="margin: 25% 20%">Community involvement and interaction with people</p> </div> </div> </div> <div style="background-position: center; background-size: cover; background-attachment: fixed; float: left;width: 100%"> <div class="hi3" style="float:left; margin: 0% 0% 7% 7%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Environmental activities</p> </div> </div> <div class="hi4" style="float:right; margin: 0% 7% 7% 0%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Economic sustainability</p> </div> </div> </div> </div> <!--Sign-up--> <div class="bg0 txtx" style="float: left;" id="sign"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1);color: #2E86C1;"> Sign-Up For weekly Newsletter </h1> </div> <div class="black txt"> <form style="text-align: center; height: 100%;" onsubmit="alert('Thank you for your support. Look forward to our weekly Newsletter for more updates.')"> <div class="x" style="padding: 5% 0% 0% 0%;"> <input required type="text" style="" placeholder="First Name"> <input required type="text" placeholder="Surname"><br> <input required style="width: 63.25%;" type="text" placeholder="Your Address"><br> <input required type="text" title="Phone No." required pattern="[0-9]{10,10}" placeholder="Enter 10-Digit Phone Number"> <input type="email" placeholder="Email"> </div> <div class="y" style="padding: 3% 0% 0% 0%;"> <label><input type="checkbox"> Yearly subscription to <strong>Tourismpedia Magazine</strong></label><br><br> <label><input type="checkbox"> Receive notifications for Local Awareness Programmes.</label> </div> <div class="x" style="padding: 3% 0% 5% 0%;"> <input type="submit" value="Submit" class="submit"> </div> </form> </div> <div class="white txt" style="float: left;"> <h1>Future Aspects</h1> <p> The sustainability of an ecotourism development or project can be expected to depend on its economics, the extent to which it is compatible with the conservation of its resourcebase, its social acceptability and its political feasibility. Sustainability and compatibility aspects of ecotourism are closely linked. Ecotourism development may not be compatible in some areas with profitability, for example, or with appropriate levels of conservation and therefore may prove to be unsustainable.<br> <br> Other economic developments may be incompatible with the sustainability of ecotourism in an area. Consequently, government intervention in the management and development of ecotourism is often required. Much hope has been placed in the possibility of using the concept of carrying capacity to manage ecotourism </p> </div> <div class="bg2 txt" style="float: left;"> <h1 style="color: white;font font-weight: lighter;">Conclusion</h1> <p> The ecotourism market appears to be expanding at a faster rate than that for tourism generally which itself is experiencing rapid growth. Factors have been identified which stimulate the growth of ecotourism. Even though ecotourism expands rapidly, there are many threats to its sustainability and expansion. Ecotourism depends on natural environments (both living and non-living) and any cultures closely connected with these.However, there are many different definitions of ecotourism so one has to be careful in dealing with the subject to determine which definition to use, especially if one is measuring the size of the ecotourism market. </p> </div> <div class="txtx black center"> <h1 class="center"><a href="" style="text-decoration: none; color: #1A5276">Back To Top</a></h1> <g style="font-weight: lighter;color: #ECF0F1;">Website Designed by Piyush Mohapatra and Arnav Praneet of AIS Mayur Vihar</g> </div> </body> </html>

Answer 1

Check this design. If you meant something else let me know.

 body, html { height: 100%; width: 100%; overflow-x: hidden; margin: 0; padding: 0; font-family: century gothic; font-size: 1em; } div { float: left; } /*Header*/ @keyframes one { 0% { margin-right: 140% } 100% { margin-right: 43% } } @keyframes two { 0% { margin-top: 120% } 100% { margin-top: 2% } } .headtxt { float: left; font-size: 1.6em; font-weight: bolder; color: #839192; margin: 2% 0%; text-align: center; cursor: pointer; transition: 0.5s; } .headtxt:hover { font-size: 1.7em; color: #17202A; } /*Scrollbar*/ ::-webkit-scrollbar-track { width: 6px; background-color: #D6EAF8; } ::-webkit-scrollbar { width: 6px; background-color: #D6EAF8; } ::-webkit-scrollbar-thumb { width: 6px; background-color: #1A5276; } /*Navbar*/ a { text-decoration: none; } div.sticky { font-family: Century Gothic; position: sticky; top: 0; width: 100%; } ul { background-color: black; list-style: none; margin: 0; padding-left: 0; height: 100%; } li { color: rgba(0, 0, 0, 9); background: darkorange; display: block; width: 25%; float: left; text-decoration: none; transition-duration: 0.5s; height: 100%; } li a { color: #fff; padding: 1rem; } li:hover, li:focus-within { background: aqua; cursor: pointer; } li:focus-within a { outline: none; } ul li ul { background: green; visibility: hidden; opacity: 0; min-width: 25%; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover>ul, ul li:focus-within>ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; } /*Image Gallery*/ .bg { background: url("b1.jpg"); height: 100%; width: 100%; background-position: center; background-size: cover; animation-name: back; animation-duration: 10s; animation-iteration-count: infinite; background-attachment: fixed; } @keyframes back { 25% { background: url("b2.jpg"); background-position: center; background-size: cover; height: 100%; width: 100%; background-attachment: fixed; } 50% { background: url("b3.jpg"); background-position: center; background-size: cover; height: 100%; width: 100%; background-attachment: fixed; } 75% { background: url("b4.jpg"); background-position: center; background-size: cover; height: 100%; width: 100%; background-attachment: fixed; } } /*Circular Images*/ .hi1, .hi2, .hi3, .hi4 { background-size: cover; background-position: center; height: 480px; width: 480px; border-radius: 50%; float: left; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.8); font-size: 2em; line-height: 200%; } .hx1 { background-size: cover; background-position: center; height: 500px; width: 500px; float: left; } .hx2 { background-size: cover; background-position: center; height: 500px; width: 500px; float: left; } .hi1 { background-image: url("c1.jpg"); } .hi2 { background-image: url("c2.jpg"); } .hi3 { background-image: url("c3.jpg"); } .hi4 { background-image: url("c4.jpg"); } .hi1 div, .hi2 div, .hi3 div, .hi4 div { background-color: rgba(0, 0, 0, 0.65); transform: scale(0); height: 480px; width: 480px; color: white; transition: 0.75s; border-radius: 50%; float: left; } .hi1:hover div, .hi2:hover div, .hi3:hover div, .hi4:hover div { transform: scale(1); } .hi1 p { display: none; float: left; } .hi1:hover p { display: inline; } /* .hx1 div{ background-color: rgba(0,0,0,0.5); height: 500px; width: 0px; color :white; transition:0.8s; float: right; } .hx2 div{ background-color: rgba(0,0,0,0.5); height: 500px; width: 0px; color :white; transition:0.8s; float: right; } .hx1:hover div,.hx2:hover div { width:500px; height: 500px; } .hi1 p {display:none; float: left;} .hi1:hover p {display:inline;} */ /*Form*/ .x, .y { width: 100%; margin: 0; } .y input { padding: 20 0px 20px 0px; font-size: 1em; cursor: pointer; } .x input { padding: 20px; width: 20%; margin: 10px; transition: 0.5s; font-size: 0.9em; } .x input:focus { width: 38.25%; } .submit { width: 20%; border: none; background-color: #1F618D; color: white; cursor: pointer; transition: 0.1s; } .submit:hover { background-color: #2E86C1; } .submit:focus { background-color: #5DADE2; } /*Other Styles*/ .center { text-align: center; margin-bottom: 0%; } .white { background-color: white; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; color: #161616; } .black { background-color: black; color: white; } .bg0 { color: white; background-color: #1B2631; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg1 { color: white; background: #C6FFDD; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #f7797d, #FBD786, #C6FFDD); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #f7797d, #FBD786, #C6FFDD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg2 { color: #CCD1D1; background-color: #2E86C1; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg3 { color: #99A3A4; background-color: black; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-position: center; } .grad { background: #d9a7c7; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #fffcdc, #d9a7c7); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #fffcdc, #d9a7c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .txt { width: 100%; text-align: justify; } .txt p { padding: 6% 15%; font-size: 1.3em; line-height: 200%; } .txt h1 { padding: 6% 15% 0% 15%; font-size: 2.3em; line-height: 100%; text-align: center; color: black; font-weight: bold; } .txtx { text-align: justify; width: 100%; text-align: center; padding: 20px 0px; } .txtx h1 { font-size: 4em; } .txt1 { width: 50%; text-align: justify; height: 500px; } .txt1 p { padding: 10% 12% 0% 12%; font-size: 1.2em; line-height: 180%; } .navigation { height: 50px; }

 <!DOCTYPE html> <html> <head> <title>Tourismpedia</title> </head> <body> <div style="width:100%; height: 91%; font-size: 1.4em; font-weight: lighter;font-family: Century Gothic;background-image: url('pgbg.png');padding-bottom: 50px;"> <img src="logo.png" style="margin-right: 43%; float: right; margin-top: 8%; height: 35%; animation-name: one;animation-duration: 3s; animation-delay: 0s;"> <h1 class="txtx headtxt" style="animation-name: two;animation-duration: 4s; animation-delay: 0s; font-family: Century Gothic;"> <a href="" style="color: #2471A3; font-size: 1.6em; text-decoration: none;font-weight: bold;">Tourismpedia</a><br> Beautiful one day, perfect the next </h1> </div> <div class="sticky"> <nav class="navigation"> <ul> <li><a href="HTML.html">Home</a></li> <li><a href="#" aria-haspopup="true">Aspects</a> <ul class="dropdown" aria-label="submenu"> <li><a href="Aspect_1.html">Interaction with Nature</a></li> <li><a href="#">Community Involvement</a></li> <li><a href="#">Environmental Activities</a></li> <li><a href="#">Economic Sustainibility</a></li> </ul> </li> <li><a href="#">Sign Up</a></li> <li><a href="#">About Us</a></li> </ul> </nav> </div> <br> <div class="bg" style="z-index: 3;"></div> <div class="white txt" id="strip" style="float: left; margin-top: 0px;"> <p id="intro"> Ecotourism has become a 'buzz' word in tourism development both because it is believed to be a rapidly expanding segment of the tourism market, and because it is seen by many conservation groups as a means to ensure ecologically sustainable development, or more generally, a way to obtain sustainable development. In order to achieve the latter objectives, tourism must itself be sustainable from an economic, political, social and environmental point of view. This also means that it must be compatible with various economic, political, social and environmental objectives. </p> </div> <div class="bg1 txt" style="float: left;"> <p> Views differ about how rapidly the ecotourism segment of the tourism market is expanding and about how large it is. Nevertheless, it is generally believed that the ecotourism market is growing at a faster rate than tourism as a whole and that it accounts for around 20 per cent of the market for tourism. The WWF (Worldwide Fund for Nature) estimated that $12 billion of the $55 billion earned from foreign tourism in developing countries in 1988 was due to ecotourism, and therefore ecotourism accounted for more than 20 per cent of this market . </p> </div> <div class="white txt" style="float: left;"> <p> Ecotourism is Responsible travel to natural areas that conserves the environment and improves the well-being of local people. Ecotourism is about uniting conservation, communities, and sustainable travel. </p> </div> <!--Norway--> <div class="bg0 txtx" style="float: left;" id="meth"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1);"> Land of the Midnight Sun </h1> </div> <div class="white txt1" style="float: left;"> <p> Like a prolonged sunset and sunrise all at once, this natural phenomena colours heaven and earth in a reddish yellow light. Welcome to “the land of the midnight sun”. It's tempting to wonder about all the sights and experiences that have been made under the midnight sun through the ages – by people living off the sea in the Lofoten and Vesterålen archipelagos, or the Sami reindeer herders of the far north. </p> </div> <div class="white txt1" style="float: right;"> <img src="b1.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: right;"> <p> Norway is “powered by nature” according to the country's official tourism slogan. For many years, Norway has been ranked among the top countries to live in. Also, according to the UN World Happiness Report 2017, Norway was voted one of the happiest countries in the world. This makes it an obvious choice to be a top sustainable destination, when environmental, social and government profiles are included. </p> </div> <div class="white txt1" style="float: left;"> <img src="b2.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: left;"> <p> Norwegian people believe that conservation is a responsibility to be shared by the whole community, including by the tourism industry. In 2007, the Norwegian government introduced Sustainable Norway 2015, to increase awareness of sustainable tourism, the environment, local communities and social matters. </p> </div> <div class="white txt1" style="float: left;"> <img src="b3.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: right;"> <p> Sitting at 69° N right in the centre of the aurora zone, the city of Tromsø is most popular place for Europeans to take a weekend break in winter just hoping for a glimpse of the Northern Lights. Although you can see them from the town, it's better to get away from the light pollution. The Lyngsalpene mountain range is where some Northern Lights chases take place. </p> </div> <div class="white txt1" style="float: left;"> <img src="b4.jpg" style="width: 100%; height: 100%;"> </div> <!--Aspects--> <div class="bg0 txtx" style="float: left;" id="comp"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1)"> Aspects Of Ecotourism </h1> </div> <div class="grad"> <div style="background-position: center; background-size: cover; background-attachment: fixed; float: left; width: 100%"> <div class="hi1" style="float:left; margin: 7% 0% 7% 7%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Interaction with nature</p> </div> </div> <div class="hi2" style="float:right; margin: 7% 7% 7% 0%"> <div style="text-align: center;"> <p style="margin: 25% 20%">Community involvement and interaction with people</p> </div> </div> </div> <div style="background-position: center; background-size: cover; background-attachment: fixed; float: left;width: 100%"> <div class="hi3" style="float:left; margin: 0% 0% 7% 7%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Environmental activities</p> </div> </div> <div class="hi4" style="float:right; margin: 0% 7% 7% 0%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Economic sustainability</p> </div> </div> </div> </div> <!--Sign-up--> <div class="bg0 txtx" style="float: left;" id="sign"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1);color: #2E86C1;"> Sign-Up For weekly Newsletter </h1> </div> <div class="black txt"> <form style="text-align: center; height: 100%;" onsubmit="alert('Thank you for your support. Look forward to our weekly Newsletter for more updates.')"> <div class="x" style="padding: 5% 0% 0% 0%;"> <input required type="text" style="" placeholder="First Name"> <input required type="text" placeholder="Surname"><br> <input required style="width: 63.25%;" type="text" placeholder="Your Address"><br> <input required type="text" title="Phone No." required pattern="[0-9]{10,10}" placeholder="Enter 10-Digit Phone Number"> <input type="email" placeholder="Email"> </div> <div class="y" style="padding: 3% 0% 0% 0%;"> <label><input type="checkbox"> Yearly subscription to <strong>Tourismpedia Magazine</strong></label><br><br> <label><input type="checkbox"> Receive notifications for Local Awareness Programmes.</label> </div> <div class="x" style="padding: 3% 0% 5% 0%;"> <input type="submit" value="Submit" class="submit"> </div> </form> </div> <div class="white txt" style="float: left;"> <h1>Future Aspects</h1> <p> The sustainability of an ecotourism development or project can be expected to depend on its economics, the extent to which it is compatible with the conservation of its resourcebase, its social acceptability and its political feasibility. Sustainability and compatibility aspects of ecotourism are closely linked. Ecotourism development may not be compatible in some areas with profitability, for example, or with appropriate levels of conservation and therefore may prove to be unsustainable.<br> <br> Other economic developments may be incompatible with the sustainability of ecotourism in an area. Consequently, government intervention in the management and development of ecotourism is often required. Much hope has been placed in the possibility of using the concept of carrying capacity to manage ecotourism </p> </div> <div class="bg2 txt" style="float: left;"> <h1 style="color: white;font font-weight: lighter;">Conclusion</h1> <p> The ecotourism market appears to be expanding at a faster rate than that for tourism generally which itself is experiencing rapid growth. Factors have been identified which stimulate the growth of ecotourism. Even though ecotourism expands rapidly, there are many threats to its sustainability and expansion. Ecotourism depends on natural environments (both living and non-living) and any cultures closely connected with these.However, there are many different definitions of ecotourism so one has to be careful in dealing with the subject to determine which definition to use, especially if one is measuring the size of the ecotourism market. </p> </div> <div class="txtx black center"> <h1 class="center"><a href="" style="text-decoration: none; color: #1A5276">Back To Top</a></h1> <g style="font-weight: lighter;color: #ECF0F1;">Website Designed by Piyush Mohapatra and Arnav Praneet of AIS Mayur Vihar</g> </div> </body> </html>

Answer 2

Add padding to li instead. Changed float: left to display: inline-block in ul. as it will float all ul to the left too. Making your dropdown float all the way to the left.

 body , html { height: 100%; width: 100%; overflow-x: hidden; margin:0; padding: 0; font-family: century gothic; font-size: 1em; } div{ float: left; } /*Header*/ @keyframes one { 0% {margin-right: 140%} 100% {margin-right: 43%} } @keyframes two { 0% {margin-top:120%} 100% {margin-top: 2%} } .headtxt{ float: left; font-size: 1.6em; font-weight:bolder; color: #839192; margin: 2% 0%; text-align: center; cursor: pointer; transition: 0.5s; } .headtxt:hover{ font-size: 1.7em; color: #17202A ; } /*Scrollbar*/ ::-webkit-scrollbar-track{ width: 6px; background-color: #D6EAF8; } ::-webkit-scrollbar{ width: 6px; background-color: #D6EAF8; } ::-webkit-scrollbar-thumb{ width: 6px; background-color: #1A5276; } /*Navbar*/ a { text-decoration: none; } div.sticky { font-family: Century Gothic; position: sticky; top: 0; width:100%; } ul { background-color: darkorange; list-style: none; margin: 0; padding-left: 0; } li { color: rgba(0, 0, 0, 9); background: darkorange; display: block; width:20%; text-decoration: none; transition-duration: 0.5s; padding: 2% 0; display: inline-block; } li a { color: #fff; padding:1rem; } li:hover, li:focus-within { background: aqua; cursor: pointer; } li:focus-within a { outline: none; } ul li ul { background: green; visibility: hidden; opacity: 0; min-width: 25%; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; } /*Image Gallery*/ .bg { background: url("b1.jpg"); height:100%; width:100%; background-position: center; background-size: cover; animation-name: back; animation-duration: 10s; animation-iteration-count: infinite; background-attachment: fixed; } @keyframes back { 25% { background:url("b2.jpg"); background-position: center; background-size: cover; height: 100%; width :100%; background-attachment: fixed; } 50% { background:url("b3.jpg"); background-position: center; background-size: cover; height: 100%; width :100%; background-attachment: fixed; } 75% { background:url("b4.jpg"); background-position: center; background-size: cover; height: 100%; width :100%; background-attachment: fixed; } } /*Circular Images*/ .hi1,.hi2,.hi3,.hi4{ background-size: cover; background-position: center; height:480px; width:480px; border-radius: 50%; float: left; box-shadow: 0px 10px 40px rgba(0,0,0,0.8); font-size: 2em; line-height: 200%; } .hx1{ background-size: cover; background-position: center; height:500px; width:500px; float: left; } .hx2{ background-size: cover; background-position: center; height:500px; width:500px; float: left; } .hi1{ background-image: url("c1.jpg"); } .hi2{ background-image: url("c2.jpg"); } .hi3{ background-image: url("c3.jpg"); } .hi4{ background-image: url("c4.jpg"); } .hi1 div,.hi2 div,.hi3 div,.hi4 div{ background-color: rgba(0,0,0,0.65); transform: scale(0); height: 480px; width: 480px; color :white; transition:0.75s; border-radius: 50%; float: left; } .hi1:hover div, .hi2:hover div, .hi3:hover div, .hi4:hover div { transform: scale(1); } .hi1 p {display:none; float: left;} .hi1:hover p {display:inline;} /* .hx1 div{ background-color: rgba(0,0,0,0.5); height: 500px; width: 0px; color :white; transition:0.8s; float: right; } .hx2 div{ background-color: rgba(0,0,0,0.5); height: 500px; width: 0px; color :white; transition:0.8s; float: right; } .hx1:hover div,.hx2:hover div { width:500px; height: 500px; } .hi1 p {display:none; float: left;} .hi1:hover p {display:inline;} */ /*Form*/ .x, .y{ width: 100%; margin: 0; } .y input {padding: 20 0px 20px 0px;font-size: 1em; cursor: pointer;} .x input {padding: 20px;width:20%;margin: 10px;transition: 0.5s;font-size: 0.9em;} .x input:focus {width:38.25%;} .submit{ width:20%; border:none; background-color: #1F618D; color:white; cursor: pointer; transition: 0.1s; } .submit:hover{ background-color: #2E86C1; } .submit:focus{ background-color: #5DADE2; } /*Other Styles*/ .center{ text-align: center; margin-bottom: 0%; } .white{ background-color: white; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; color:#161616; } .black{ background-color: black; color: white; } .bg0{ color:white; background-color: #1B2631; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg1{ color:white; background: #C6FFDD; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #f7797d, #FBD786, #C6FFDD); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #f7797d, #FBD786, #C6FFDD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg2{ color:#CCD1D1; background-color: #2E86C1; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; } .bg3{ color: #99A3A4; background-color: black; background-attachment: fixed; background-repeat: no-repeat; background-position: center; background-position: center; } .grad{ background: #d9a7c7; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #fffcdc, #d9a7c7); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #fffcdc, #d9a7c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .txt{ width: 100%; text-align: justify; } .txt p{ padding: 6% 15% ; font-size: 1.3em; line-height: 200%; } .txt h1{ padding: 6% 15% 0% 15% ; font-size: 2.3em; line-height: 100%; text-align: center; color: black; font-weight: bold; } .txtx { text-align: justify; width: 100%; text-align: center; padding: 20px 0px; } .txtx h1{ font-size: 4em; } .txt1{ width: 50%; text-align: justify; height: 500px; } .txt1 p{ padding: 10% 12% 0% 12%; font-size: 1.2em; line-height: 180%; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="CSS.css"> <link rel="icon" type="image/png" href="logo.png"> <title>Tourismpedia</title> </head> <body> <div style="width:100%; height: 91%; font-size: 1.4em; font-weight: lighter;font-family: Century Gothic;background-image: url('pgbg.png');"> <img src="logo.png" style="margin-right: 43%; float: right; margin-top: 8%; height: 35%; animation-name: one;animation-duration: 3s; animation-delay: 0s;"> <h1 class="txtx headtxt" style="animation-name: two;animation-duration: 4s; animation-delay: 0s; font-family: Century Gothic;"> <a href="" style="color: #2471A3; font-size: 1.6em; text-decoration: none;font-weight: bold;">Tourismpedia</a><br> Beautiful one day, perfect the next </h1> </div> <div class="sticky"> <nav class="navigation"> <ul> <li><a href="HTML.html">Home</a></li> <li><a href="#" aria-haspopup="true">Aspects</a> <ul class="dropdown" aria-label="submenu"> <li><a href="Aspect_1.html">Interaction with Nature</a></li> <li><a href="#">Community Involvement</a></li> <li><a href="#">Environmental Activities</a></li> <li><a href="#">Economic Sustainibility</a></li> </ul> </li> <li><a href="#">Sign Up</a></li> <li><a href="#">About Us</a></li> </ul> </nav> </div> <br> <div class="bg" style="z-index: 3;"></div> <div class="white txt" id="strip" style="float: left; margin-top: 0px;" > <p id="intro"> Ecotourism has become a 'buzz' word in tourism development both because it is believed to be a rapidly expanding segment of the tourism market, and because it is seen by many conservation groups as a means to ensure ecologically sustainable development, or more generally, a way to obtain sustainable development. In order to achieve the latter objectives, tourism must itself be sustainable from an economic, political, social and environmental point of view. This also means that it must be compatible with various economic, political, social and environmental objectives. </p> </div> <div class="bg1 txt" style="float: left;"> <p> Views differ about how rapidly the ecotourism segment of the tourism market is expanding and about how large it is. Nevertheless, it is generally believed that the ecotourism market is growing at a faster rate than tourism as a whole and that it accounts for around 20 per cent of the market for tourism. The WWF (Worldwide Fund for Nature) estimated that $12 billion of the $55 billion earned from foreign tourism in developing countries in 1988 was due to ecotourism, and therefore ecotourism accounted for more than 20 per cent of this market . </p> </div> <div class="white txt" style="float: left;"> <p> Ecotourism is Responsible travel to natural areas that conserves the environment and improves the well-being of local people. Ecotourism is about uniting conservation, communities, and sustainable travel. </p> </div> <!--Norway--> <div class="bg0 txtx" style="float: left;" id="meth"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1);"> Land of the Midnight Sun </h1> </div> <div class="white txt1" style="float: left;"> <p> Like a prolonged sunset and sunrise all at once, this natural phenomena colours heaven and earth in a reddish yellow light. Welcome to “the land of the midnight sun”. It's tempting to wonder about all the sights and experiences that have been made under the midnight sun through the ages – by people living off the sea in the Lofoten and Vesterålen archipelagos, or the Sami reindeer herders of the far north. </p> </div> <div class="white txt1" style="float: right;"> <img src="b1.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: right;"> <p> Norway is “powered by nature” according to the country's official tourism slogan. For many years, Norway has been ranked among the top countries to live in. Also, according to the UN World Happiness Report 2017, Norway was voted one of the happiest countries in the world. This makes it an obvious choice to be a top sustainable destination, when environmental, social and government profiles are included. </p> </div> <div class="white txt1" style="float: left;"> <img src="b2.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: left;"> <p> Norwegian people believe that conservation is a responsibility to be shared by the whole community, including by the tourism industry. In 2007, the Norwegian government introduced Sustainable Norway 2015, to increase awareness of sustainable tourism, the environment, local communities and social matters. </p> </div> <div class="white txt1" style="float: left;"> <img src="b3.jpg" style="width: 100%; height: 100%;"> </div> <div class="white txt1" style="float: right;"> <p> Sitting at 69° N right in the centre of the aurora zone, the city of Tromsø is most popular place for Europeans to take a weekend break in winter just hoping for a glimpse of the Northern Lights. Although you can see them from the town, it's better to get away from the light pollution. The Lyngsalpene mountain range is where some Northern Lights chases take place. </p> </div> <div class="white txt1" style="float: left;"> <img src="b4.jpg" style="width: 100%; height: 100%;"> </div> <!--Aspects--> <div class="bg0 txtx" style="float: left;" id="comp"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1)"> Aspects Of Ecotourism </h1> </div> <div class="grad"> <div style="background-position: center; background-size: cover; background-attachment: fixed; float: left; width: 100%"> <div class="hi1" style="float:left; margin: 7% 0% 7% 7%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Interaction with nature</p> </div> </div> <div class="hi2" style="float:right; margin: 7% 7% 7% 0%"> <div style="text-align: center;"> <p style="margin: 25% 20%">Community involvement and interaction with people</p> </div> </div> </div> <div style="background-position: center; background-size: cover; background-attachment: fixed; float: left;width: 100%"> <div class="hi3" style="float:left; margin: 0% 0% 7% 7%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Environmental activities</p> </div> </div> <div class="hi4" style="float:right; margin: 0% 7% 7% 0%"> <div style="text-align: center;"> <p style="margin: 40% 20%">Economic sustainability</p> </div> </div> </div> </div> <!--Sign-up--> <div class="bg0 txtx" style="float: left;" id="sign"> <h1 style="text-shadow: 0px 5px 10px rgba(0,0,0,1);color: #2E86C1;"> Sign-Up For weekly Newsletter </h1> </div> <div class="black txt"> <form style="text-align: center; height: 100%;" onsubmit="alert('Thank you for your support. Look forward to our weekly Newsletter for more updates.')"> <div class="x" style="padding: 5% 0% 0% 0%;"> <input required type ="text" style="" placeholder="First Name"> <input required type="text" placeholder="Surname" ><br> <input required style="width: 63.25%;" type="text" placeholder="Your Address"><br> <input required type ="text" title="Phone No." required pattern="[0-9]{10,10}" placeholder="Enter 10-Digit Phone Number"> <input type="email" placeholder="Email"> </div> <div class="y" style="padding: 3% 0% 0% 0%;"> <label><input type="checkbox"> Yearly subscription to <strong>Tourismpedia Magazine</strong></label><br><br> <label><input type="checkbox"> Receive notifications for Local Awareness Programmes.</label> </div> <div class="x" style="padding: 3% 0% 5% 0%;"> <input type="submit" value="Submit" class="submit"> </div> </form> </div> <div class="white txt" style="float: left;"> <h1>Future Aspects</h1> <p> The sustainability of an ecotourism development or project can be expected to depend on its economics, the extent to which it is compatible with the conservation of its resourcebase, its social acceptability and its political feasibility. Sustainability and compatibility aspects of ecotourism are closely linked. Ecotourism development may not be compatible in some areas with profitability, for example, or with appropriate levels of conservation and therefore may prove to be unsustainable.<br> <br> Other economic developments may be incompatible with the sustainability of ecotourism in an area. Consequently, government intervention in the management and development of ecotourism is often required. Much hope has been placed in the possibility of using the concept of carrying capacity to manage ecotourism </p> </div> <div class="bg2 txt" style="float: left;"> <h1 style="color: white;font font-weight: lighter;">Conclusion</h1> <p> The ecotourism market appears to be expanding at a faster rate than that for tourism generally which itself is experiencing rapid growth. Factors have been identified which stimulate the growth of ecotourism. Even though ecotourism expands rapidly, there are many threats to its sustainability and expansion. Ecotourism depends on natural environments (both living and non-living) and any cultures closely connected with these.However, there are many different definitions of ecotourism so one has to be careful in dealing with the subject to determine which definition to use, especially if one is measuring the size of the ecotourism market. </p> </div> <div class="txtx black center"> <h1 class="center"><a href="" style="text-decoration: none; color: #1A5276">Back To Top</a></h1> <g style="font-weight: lighter;color: #ECF0F1;">Website Designed by Piyush Mohapatra and Arnav Praneet of AIS Mayur Vihar</g> </div> </body> </html>