导航栏在大屏幕上似乎可以正常工作。您可以在下面看到它:
在小屏幕上,导航栏以这种方式转换:
但是,我无法访问以下gif所示的下拉菜单:
我该如何解决?
这是导航栏脚本,尽管有点混乱:
<nav class='navbar fixed-top navbar-expand-lg navbar navbar-dark' style='background-color:rgb(0,0,0);''>\
\
<style>\
.underAnim:after{display:block; content:''; height:2px; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;} .underAnim:hover:after { width: 100%; left: 0; }\
</style>\
<a class='navbar-brand' href='MainPage.html'> \
<img src='images/LogoEdits/2.JPG' width='150' height='80' style='margin-left:10%;' class='d-inline-block align-top' alt='Logo'>\
</a>\
\
<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Toggle navigation'>\
<span class='navbar-toggler-icon'></span>\
</button>\
\
<div class='collapse navbar-collapse' style='margin-left:60px;' id='navbarNavDropdown'>\
<ul class='navbar-nav'>\
<li class='nav-item active'>\
<a class='nav-link underAnim' href='MainPage.html'>ΑΡΧΙΚΗ<span class='sr-only'>(current)</span></a>\
</li> \
<li class='nav-item'>\
<a class='nav-link underAnim' href='offers.html'>ΠΡΟΣΦΟΡΕΣ</a>\
</li> \
<li class='nav-item dropdown' style='height:35px;'> \
<a class='nav-link dropdown-toggle' href='Rooms.html' id='navbarDropdownMenuLink' aria-haspopup='true' aria-expanded='false'>\
ΔΩΜΑΤΙΑ \
</a>\
\
<div class='dropdown-menu' aria-labelledby='navbarDropdownMenuLink'> \
<style>.dropdown-item{transition:0.4s;} .dropdown-item:hover{background-color:rgb(30,144,255);color:white;}</style><a class='dropdown-item' href='standard-room.html'>Standard Δωμάτιο</a> \
<a class='dropdown-item' href='family-room.html'>Οικογενειακό Δωμάτιο</a>\
<a class='dropdown-item' href='executive-room.html'>Executive Δωμάτιο</a> \
<a class='dropdown-item' href='superior-suite.html'>Superior Σουίτα</a> \
<a class='dropdown-item' href='family-suite.html'>Οικογενειακή Σουίτα</a> \
<a class='dropdown-item' href='executive-suite.html'>Executive Σουίτα</a> \
<a class='dropdown-item' href='president-suite.html'>Προεδρική Σουίτα</a> \
</div> \
</li> \
<li class='nav-item'> \
<a class='nav-link underAnim'href='photosLightBox.html'>ΦΩΤΟΓΡΑΦΙΕΣ</a> \
</li> \
<li class='nav-item dropdown' style='height:35px;'> \
<a class='nav-link dropdown-toggle' href='theHotel.html' id='navbarDropdownMenuLink' aria-haspopup='true' aria-expanded='false'> \
ΤΟ ΞΕΝΟΔΟΧΕΙΟ \
</a> \
<div class='dropdown-menu' aria-labelledby='navbarDropdownMenuLink'> \
<a class='dropdown-item' href='hotel-location.html'>Τοποθεσία Ξενοδοχείου</a> \
<a class='dropdown-item' href='services.html'>Υπηρεσίες</a> \
<a class='dropdown-item' href='experience.html'>Εμπειρία</a> \
</div> \
</li> \
\
\
<li class='nav-item' style='margin-left:100px; margin-top:6px;'> \
<a href='Reservations.html' class='btn btn-info prim' role='button' \
style='white-space: nowrap; text-align: center;'>ΚΑΝΤΕ ΚΡΑΤΗΣΗ</a> \
</li> \
</ul> \
</div> \
</nav>