Explore a unique navigation bar using CSS hover effects

I am trying to create a navigation bar that displays a big block when hovered over, but unfortunately, it's not working as expected.

Below is the HTML code I have written:

<div id="outerContainer">
    <div id="header">
        <a id="logo" href="#"><img src="#"></a>
        <div id="nav">
            <div class="selectors"><a href="#">aaa</a></div>
            <div class="selectors"><a href="#">bbb</a></div>
            <div class="selectors"><a href="#">ccc</a></div>
            <div class="selectors"><a href="#">ddd</a></div>
        </div>
        
    </div>

    <div id="innerContainer">
        <div class="navHidden"></div>
        <div class="navHidden"></div>
        <div class="navHidden"></div>
        <div class="navHidden"></div>

        <div id="content"></div>
        
    </div>

Here is the CSS code I have used:

#nav{
position:relative;
float:left;
width:600px;
padding-left:30px;
padding-top:25px;
}

.selectors{
width:150px;
position:relative;
float:left;
margin:0;
z-index:10px;
}

.selectors:hover{border-bottom-color:silver;background-color:silver;}

.navHidden{
width:760px;
height:100px;
background-color:silver;
position:absolute;
z-index:10;
display:none;
visibility:hidden;
}

The desired layout of the website should look like this:

|.selectors |.selectors | .selectors | .selectors |

| navHidden .....(only shown when hover)......|

Due to assignment restrictions, I am only allowed to use HTML and CSS for this project.

Thank you.

htmlcss

Answer №1

The code has been modified to achieve the desired layout, but it is still not perfect as some excess rules were not removed. It is recommended to do some further adjustments and cleaning up on your own.

HTML

<div id="header">
        <a id="logo" href="#"><img src="#"></a>
        <div id="nav">
            <div class="selectors">
                <a href="#">aaa</a>
                <div class="navHidden">Lorem ipsum text</div>
            </div>
            <div class="selectors">
                <a href="#">bbb</a>
                <div class="navHidden">Lorem ipsum text</div>
            </div>
            <div class="selectors">
                <a href="#">ccc</a>
                <div class="navHidden">Lorem ipsum text</div>
            </div>
            <div class="selectors">
                <a href="#">ddd</a>
                <div class="navHidden">Lorem ipsum text</div>
            </div>
        </div>

    </div>

CSS

#nav{
    position:relative;
    float:left;
    width:600px;
    padding-left:30px;
    padding-top:25px;
}

.selectors{
    width:150px;
    position:relative;
    float:left;
    margin:0;
    z-index:10px;
}

.selectors:hover{
    border-bottom-color:silver;
    background-color:silver;
}
.navHidden{
    width:760px;
    height:100px;
    background-color:silver;
    position:absolute;
    z-index:10;
    display:none;
    top: 100%;
    left: 0;
}
.selectors:hover .navHidden {display: block;}

Answer №2

Here's a suggestion for creating your navigation menu. 

  <style>
  ul, li {list-style: none; padding: 0; margin: 0; float: left;}
  li a{display: block; width: 100px; height: 40px;}
  li a:hover{display: block; width: 100px; height: 40px; background: red;}
  li ul {display: none;}
  li:hover ul {display: block;}
  </style>
  </head>
   <ul id="nav">
       <li class="selectors"><a href="#">aaa</a></li>
       <li class="selectors"><a href="#">bbbb</a>
            <ul id="innerContainer">
                <li class="navHidden">222</li>
                </li>
            </ul>
       </li>
  </ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stylish slanted divs achieved using Bootstrap 4

I'm currently in the process of constructing a block with 6 slanted divs using Bootstrap. Take a look at the image provided below: https://i.sstatic.net/vvg0b.png After attempting to use rows and columns, I noticed that they weren't aligning co ...

htmlcssbootstrap-4

Choose a node from descendants based on its attribute

I am working with an interface that switches between displaying different div elements. Each div element has their children arranged differently, and when the switch happens, I need to access a specific child node of the newly displayed div. However, I fin ...

javascripthtmlcss

My preference is to launch a pgsql query in a separate window instead of saving it as a CSV file

I have a code snippet that successfully downloads the results of a pgsql query as a csv file upon form submission. However, when I tried changing the attachment to inline, it generated a downloaded php file with all the data instead. My ultimate goal is to ...

phphtmlpostgresql

What is the best method for managing file storage and retrieval in web applications that only run on the client-side?

I'm currently working on an application where users can create their own data. Without a backend or database, all the information is stored within the user's session. My preferred solution involves: User interacts with the app, clicks "Save", ...

javascripthtmlofflinehtml5-filesystem

Basic form submission versus using an Ajax loader mechanism

Handling forms can be done in various ways. One way is to submit the form and retrieve variables in PHP, while another method involves sending data with AJAX. During this process, a dialog can be displayed with information about processing the data, along ...

phphtmlajaxjquery-uijquery

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

javascriptjquerycssresponsive-design

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

When the user interface displays two radio buttons - one for YES and one for NO - and the user clicks on YES, a dropdown is shown. Conversely, if the user clicks on NO, a textbox is displayed. How can I clear the values in the dropdown and textbox when s ...

htmlcssangulartypescript

Link not functioning correctly on mobile-responsive CSS

Having some trouble with hyperlinks over a background image. The hyperlinks work fine normally, but in mobile view, nothing happens when clicking on them. Below is the code for the hyperlinks. You can also visit the site and see that the "Post a Project" ...

htmlcssbootstrap-4

Tips on centering text within child elements of a flexbox using the align property

.cnt { display: flex; } .one { background: #ff0000; width: 300px; } .two { background: #00ff00; flex: 1; } <div class="cnt"> <div class="one"> Center me </div> <div class="two"> And me </div> </d ...

htmlcssflexbox

Implement a dialog on top of a current web page, achieve php-ajax query result, and enhance with

My website features 'dynamic' content, where 'static' nav-buttons replace specific div contents upon clicking. While I am able to retrieve my php/ajax results in a dialog box, I am struggling with placing this dialog above my current p ...

javascriptphphtmlajaxjquery-mobile

Can you identify the issue within this code that combines HTML5, CSS, and JavaScript?

I'm attempting to create a feature where, upon clicking a button, a hidden div will be revealed. However, my current implementation doesn't seem to be working. function reload(){ window.reload(); } function vis(x,z,a){ var xpar = docu ...

javascripthtmlcsswebhidden

What is the best way to design a responsive menu that is perfectly centered?

I'm facing challenges with designing a menu that includes 4 items, needs to be centered next to each other with spacing in between, and should stack vertically on mobile devices. The desired look for the menu can be viewed in this image... https://i. ...

css

What is the best way to align all of my content to the center in HTML?

In my web design class, I encountered an issue while creating a page. Currently, my page consists of a navigation bar and an image. I wanted to center both elements using CSS. display: block; margin-left: auto; margin-right: auto I applied this CSS to th ...

htmlcss

The magic of CSS's 3D Transformation feature

Currently, I am working on a 'Flip' effect using the CSS3 transform Property. While everything seems to be functioning properly in recent versions of Chrome, Firefox, and Safari, I'm facing challenges when it comes to creating a fallback fo ...

htmlcsstransformfallback

Having trouble modifying a value in a form and submitting it to the following jsp page

I'm encountering an issue with changing the value in a hidden input element before submitting data to another JSP file (db.jsp) for processing. The value should be different depending on which button is clicked, but it always remains as the default va ...

javascriptjavajqueryhtmljsp

Discovering whether an image contains a caption with the help of JavaScript

There are various websites that display captions on images in paragraphs, h1 tags, or contained within a div along with the image. I am interested in learning how to determine if an image has an associated caption using JavaScript, especially when the cap ...

javascripthtmlcss

Access an HTML page programmatically using JavaScript

Make sure to have a confirmation window pop up before submitting the form, and after confirming submission (by clicking OK), redirect to a confirmation page. Here's an example code snippet: <button type="submit" value="Save" id="Save" onclick="cl ...

javascripthtmlconfirmation

Prevent HTML Characters from Rendering in Preformatted Text Tag

After setting up a syntax highlighter, I found out that for it to function properly, the tags need to be indicated as &lt; and &gt;. My task now is to switch all <'s with &lt; and >'s with &gt;, but only within the PRE tag. ...

phphtmlreplacepre

Creating line breaks for ToolTip titles in Material-UI can be achieved by using the appropriate syntax and

I am currently working with the ToolTip component and I have a query regarding displaying two lines for the title text - one line for each language rather than having them displayed on a single line. Is it possible to achieve this and how can I style the c ...

javascripthtmlcssreactjsmaterial-ui

Utilizing intricate CSS selectors for integration testing with webdriverjs

In my quest to develop integration tests using Selenium with JavaScript bindings, WebdriverJS, Mocha, and Chai, I stumbled across an interesting suggestion in this article. It proposed using WebdriverJS over the official SeleniumJS bindings for some reason ...

javascriptcssselenium-webdriverwebdriver